---
import Hr from './Hr.astro';
import IconX from '@/assets/icons/IconX.svg';
import IconMoon from '@/assets/icons/IconMoon.svg';
import IconSearch from '@/assets/icons/IconSearch.svg';
import IconSunHigh from '@/assets/icons/IconSunHigh.svg';
import IconMenuDeep from '@/assets/icons/IconMenuDeep.svg';
import LinkButton from './LinkButton.astro';
import config from '@/config';
import getPath from '@/utils/getPath';

const { pathname } = Astro.url;

// Remove trailing slash from current pathname if exists
const currentPath = pathname.endsWith('/') && pathname !== '/' ? pathname.slice(0, -1) : pathname;

const isActive = (path: string) => {
  const targetPath = getPath(path);

  return currentPath.startsWith(targetPath);
};
---

<header>
  <div
    id="nav-container"
    class="max-w-app mx-auto flex flex-col items-center justify-between sm:flex-row"
  >
    <div
      id="top-nav-wrap"
      class="bg-background relative flex w-full items-baseline justify-between p-4 sm:items-center sm:py-6"
    >
      <a
        href={getPath('/')}
        class="absolute py-1 text-xl leading-8 font-semibold whitespace-nowrap sm:static sm:my-auto sm:text-2xl sm:leading-none"
      >
        {config.title}
      </a>
      <nav
        id="nav-menu"
        class="flex w-full flex-col items-center sm:ms-2 sm:flex-row sm:justify-end sm:space-x-4 sm:py-0"
      >
        <button
          id="menu-btn"
          class="focus-outline self-end p-2 sm:hidden"
          aria-label="Open Menu"
          aria-expanded="false"
          aria-controls="menu-items"
        >
          <IconX id="close-icon" class="hidden" />
          <IconMenuDeep id="menu-icon" />
        </button>
        <ul
          id="menu-items"
          class:list={[
            'mt-4 grid w-44 grid-cols-2 place-content-center gap-2',
            '[&>li>a]:hover:text-accent [&>li>a]:block [&>li>a]:px-4 [&>li>a]:py-3 [&>li>a]:text-center [&>li>a]:font-medium sm:[&>li>a]:px-2 sm:[&>li>a]:py-1',
            'hidden',
            'sm:mt-0 sm:flex sm:w-auto sm:gap-x-5 sm:gap-y-0',
          ]}
        >
          <li class="col-span-2">
            <a href={getPath('/posts')} class:list={{ 'active-nav': isActive('/posts') }}>
              Posts
            </a>
          </li>
          <li class="col-span-2">
            <a href={getPath('/tags')} class:list={{ 'active-nav': isActive('/tags') }}> Tags </a>
          </li>
          <li class="col-span-2">
            <a href={getPath('/archives')} class:list={{ 'active-nav': isActive('/archives') }}>
              Archives
            </a>
          </li>
          <li class="col-span-2">
            <a href={getPath('/about')} class:list={{ 'active-nav': isActive('/about') }}>
              About
            </a>
          </li>

          <li class="col-span-1 flex items-center justify-center">
            <LinkButton
              href={getPath('/search')}
              class:list={[
                'focus-outline flex p-3 sm:p-1',
                { '[&>svg]:stroke-accent': isActive('/search') },
              ]}
              ariaLabel="search"
              title="Search"
            >
              <IconSearch />
              <span class="sr-only">Search</span>
            </LinkButton>
          </li>
          {
            config.lightAndDarkMode && (
              <li class="col-span-1 flex items-center justify-center">
                <button
                  id="theme-btn"
                  class="focus-outline hover:[&>svg]:stroke-accent relative size-12 p-4 sm:size-8"
                  title="Toggles light & dark"
                  aria-label="auto"
                  aria-live="polite"
                >
                  <IconMoon class="absolute top-[50%] left-[50%] -translate-[50%] scale-100 rotate-0 transition-all dark:scale-0 dark:-rotate-90" />
                  <IconSunHigh class="absolute top-[50%] left-[50%] -translate-[50%] scale-0 rotate-90 transition-all dark:scale-100 dark:rotate-0" />
                </button>
              </li>
            )
          }
        </ul>
      </nav>
    </div>
  </div>
  <Hr />
</header>

<script>
  function toggleNav() {
    const menuBtn = document.querySelector('#menu-btn');
    const menuItems = document.querySelector('#menu-items');
    const menuIcon = document.querySelector('#menu-icon');
    const closeIcon = document.querySelector('#close-icon');

    if (!menuBtn || !menuItems || !menuIcon || !closeIcon) return;

    menuBtn.addEventListener('click', () => {
      const openMenu = menuBtn.getAttribute('aria-expanded') === 'true';

      menuBtn.setAttribute('aria-expanded', openMenu ? 'false' : 'true');
      menuBtn.setAttribute('aria-label', openMenu ? 'Open Menu' : 'Close Menu');

      menuItems.classList.toggle('hidden');
      menuIcon.classList.toggle('hidden');
      closeIcon.classList.toggle('hidden');
    });
  }

  toggleNav();

  // Runs on view transitions navigation
  document.addEventListener('astro:after-swap', toggleNav);
</script>
